﻿@page
@using Volo.Abp.AspNetCore.Mvc.UI.Layout
@model YaAppoint.Web.Pages.Rules.RuleTemplateModel
@await Component.InvokeAsync("MonacoEditorWidget") 
@inject IPageLayout PageLayout
@{
    PageLayout.Content.Title = "规则模板";
}
@section scripts
{
    <abp-script src="/codemirror/lib/codemirror.js"></abp-script>
    <abp-script src="/codemirror/mode/clike/clike.js"></abp-script>
    <abp-script src="/codemirror/mode/javascript/javascript.js"></abp-script>
    <abp-script src="/Pages/Rules/RuleTemplate.cshtml.js"></abp-script>
}

@section styles
{
    <abp-style src="/codemirror/lib/codemirror.css"></abp-style>
    <abp-style src="/Pages/Rules/RuleTemplate.css"></abp-style>
}
<div class="content-container">
    <div id="app">
        <div class="toolbar">
            <el-row>
                <el-col :span="23">
                    <div class="grid-content bg-purple-dark">
                        <el-button v-on:click="templateShowCreate" icon="el-icon-plus" size="mini" v-if="addPermission">新建模板</el-button>
                        <el-button v-on:click="dirShowCreate" icon="fa fa-folder-plus" size="mini" v-if="addPermission">新建目录</el-button>
                        <el-input v-model.trim="filterName" placeholder="模板名称" size="mini" style="width:300px;margin-left:10px" clearable></el-input>
                        <el-button type="primary" v-on:click="loadTreeData" icon="el-icon-search" size="mini">搜索</el-button>
                        <el-button v-on:click="importFromJsonFile" icon="el-icon-user-solid" size="mini" v-if="importPermission">导入</el-button>
                        <el-button v-on:click="exportToJsonFile" icon="el-icon-user-solid" size="mini" v-if="exportPermission">导出</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="content-body">
            <el-tree :data="treeData"
                     node-key="id"
                     ref="template-tree"
                     v-on:node-click="nodeClicked"
                     highlight-current
                     empty-text="暂无规则模板"
                     :expand-on-click-node="false">
                <div class="custom-tree-node" slot-scope="{ node, data }">
                    <div class="icon-container">
                        <i class="fa fa-folder" v-if="data.isDirectory"></i>
                        <i class="fa fa-list" v-else></i>
                    </div>
                    <div class="name">{{data.label}}</div>
                    <div class="actions-container">
                        <el-button 
                                   type="text"
                                   size="mini"
                                   icon="el-icon-edit"
                                   v-on:click="() => showEdit(node,data)">
                        </el-button>
                        <el-button 
                                   type="text"
                                   size="mini"
                                   icon="el-icon-delete"
                                   v-on:click="() => remove(node, data)">
                        </el-button>
                    </div>
                </div>
            </el-tree>
        </div>

        <!--创建与编辑目录对话框-->
        <el-dialog :title="templateDialogTitle" :visible.sync="dirDialogVisible" width="700px" v-on:close="dirResetForm" :close-on-click-modal="false">
            <el-form :model="directory" :label-width="dirLabelWidth" ref="dirDialogForm" :rules="dirRules">
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="父级">
                                <el-input v-model.trim="directory.parentName" size="mini" autocomplete="off" disabled></el-input>
                            </el-form-item>
                        </div>
                    </el-col>   
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="名称" prop="name">
                                <el-input v-model.trim="directory.name" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="顺序" prop="order">
                                <el-input type="number" step="1" v-model="directory.order" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" v-on:click="dirSave" size="mini">保存</el-button>
                <el-button v-on:click="dirResetForm" size="mini">取 消</el-button>
            </div>
        </el-dialog>

        <!--规则模板设计对话框-->
        <el-dialog class="rule-dialog" :title="templateDialogTitle" :visible.sync="templateDialogVisible" v-on:close="templateResetForm" :close-on-click-modal="false" fullscreen>
            <el-form :model="ruleTemplate" :label-width="templateLabelWidth" ref="templateDialogForm" :rules="templatteRules">
                <div class="rule-diaolog-header">
                    <el-row>
                        <el-col :span="8">
                            <div class="grid-content bg-purple-dark">
                                <el-form-item label="名称" prop="name">
                                    <el-input v-model.trim="ruleTemplate.name" size="mini" autocomplete="off" clearable></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <div class="grid-content bg-purple-dark">
                                <el-form-item label="类名" prop="typeName">
                                    <el-input v-model.trim="ruleTemplate.typeName" size="mini" autocomplete="off" clearable></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple-dark">
                                <el-form-item label="父级目录" >
                                    <el-input v-model.trim="ruleTemplate.parentName" size="mini" autocomplete="off" clearable disabled></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="grid-content bg-purple-dark">
                                <el-form-item label="排  序" prop="order">
                                    <el-input v-model.trim="ruleTemplate.order" type="number" size="mini" autocomplete="off" clearable></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row style="margin-bottom:5px;">
                        <el-col :span="24">
                            <el-form-item label="描   述">
                                <el-input type="textarea"
                                          :rows="1"
                                          placeholder="请输入描述"
                                          v-model="ruleTemplate.description">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="内容">
                                <code-mirror v-model="ruleTemplate.script" :mode="language"></code-mirror>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" v-on:click="saveTemplate" size="mini">保存</el-button>
            </div>
        </el-dialog>
    </div>
</div>
